import {useState} from 'react';
/**
 * 
 *  自定义hook
 * 封装自定义hook 思路
 * 1、下生命一个以use打头的函数
 * 2、在函数体内封装可重复使用的逻辑(只要是可复用的逻辑)
 * 3、把组件中用到的状态或者回调函数 return出去 (以对象  或者 数组) 的形式
 * 4、在那个组件中用到这个逻辑，就执行这个函数，结构出来的状态和回调进行使用
 * 
 * 
 * 
 * hook使用规则：
 *  1、只能在组件中  或者  在自定义hook函数中使用；
 *  2、 只能在组件顶层调用，不能嵌套 if 条件  for循环事件中、 其他函数中；
 */
function useToggle(){
    /**可复用的逻辑 方法 */
    const [show ,setShow] = useState(true);
    const fnshowHide = ()=> setShow(!show);
    //如果有外部组价 要使用  状态 和回调函数  则 需要 return 出去   
    return {
        show ,
        fnshowHide
    }
}
function B(){
    const {show ,fnshowHide} = useToggle();
    return <>
     {show && <div>我是B组件</div>}
     <button onClick={fnshowHide}>B组件</button>
    </>
}
function HookFunction(){
    const {show ,fnshowHide} = useToggle();
    return <div>
        <B/>
        {show && <div>我是要被显隐的 展示</div>}
        <button onClick={fnshowHide}>显隐</button>

    </div>
}
export default(HookFunction);
// npm config set prefix "D:\node\node_global"
// npm config set cache "D:\node\node_cache"